﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Table学习-id&sect;headers</title>
    <style>
        html {
            font-family: sans-serif;
        }

        table {
            border-collapse: collapse;
            border: 2px solid rgb(200,200,200);
            letter-spacing: 1px;
            font-size: 0.8rem;
        }

        td, th {
            border: 1px solid rgb(190,190,190);
            padding: 10px 20px;
        }

        th {
            background-color: rgb(235,235,235);
        }

        td {
            text-align: center;
        }
            tr:nth-child(2n) td {
                background-color: aqua;
            }
            tr:nth-child(2n+1) td {
                background-color: aquamarine;
            }

        /*tr:nth-child(even) td {
            background-color: rgb(250,250,250);
        }

        tr:nth-child(odd) td {
            background-color: rgb(245,245,245);
        }*/

        caption {
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>Items sold summary</h1>

    <table>
        <caption>Items Sold August 2016</caption>
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th colspan="3">Clothes</th>
                <th colspan="2">Accessories</th>
            </tr>
            <tr>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>Trousers</th>
                <th>Skirts</th>
                <th>Dresses</th>
                <th>Bracelets</th>
                <th>Rings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="3">Belgium</th>
                <th>Antwerp</th>
                <td>56</td>
                <td>22</td>
                <td>43</td>
                <td>72</td>
                <td>23</td>
            </tr>
            <tr>
                <th>Gent</th>
                <td>46</td>
                <td>18</td>
                <td>50</td>
                <td>61</td>
                <td>15</td>
            </tr>
            <tr>
                <th>Brussels</th>
                <td>51</td>
                <td>27</td>
                <td>38</td>
                <td>69</td>
                <td>28</td>
            </tr>
            <tr>
                <th rowspan="2">The Netherlands</th>
                <th>Amsterdam</th>
                <td>89</td>
                <td>34</td>
                <td>69</td>
                <td>85</td>
                <td>38</td>
            </tr>
            <tr>
                <th>Utrecht</th>
                <td>80</td>
                <td>12</td>
                <td>43</td>
                <td>36</td>
                <td>19</td>
            </tr>
        </tbody>
    </table>

    <table>
        <caption>Items Sold August 2016</caption>
        <thead>
            <tr>
                <th scope="rowgroup" rowspan="2">国家</th>
                <th scope="rowgroup" rowspan="2">地区</th>
                <th scope="colgroup" colspan="3">服装</th>
                <th scope="colgroup" colspan="2">附件</th>
            </tr>
            <tr>
                <th scope="col">裤子</th>
                <th scope="col">裙子</th>
                <th scope="col">连衣裙</th>
                <th scope="col">手镯</th>
                <th scope="col">吊环</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="rowgroup" rowspan="3">比利时</th>
                <th scope="col">安特卫普</th>
                <td>56</td>
                <td>22</td>
                <td>43</td>
                <td>72</td>
                <td>23</td>
            </tr>
            <tr>
                <th scope="col">根特</th>
                <td>46</td>
                <td>18</td>
                <td>50</td>
                <td>61</td>
                <td>15</td>
            </tr>
            <tr>
                <th scope="col">布鲁塞尔</th>
                <td>51</td>
                <td>27</td>
                <td>38</td>
                <td>69</td>
                <td>28</td>
            </tr>
            <tr>
                <th scope="rowgroup" rowspan="2">荷兰</th>
                <th scope="col">阿姆斯特丹</th>
                <td>89</td>
                <td>34</td>
                <td>69</td>
                <td>85</td>
                <td>38</td>
            </tr>
            <tr>
                <th scope="col">乌特勒支</th>
                <td>80</td>
                <td>12</td>
                <td>43</td>
                <td>36</td>
                <td>19</td>
            </tr>
        </tbody>
    </table>


    <table>
        <caption>Items Sold August 2016</caption>
        <thead>
            <tr>
                <th rowspan="2" id="state">国家</th>
                <th rowspan="2" id="city">城市</th>
                <th id="Clothes" colspan="3">服装</th>
                <th id="Accessories" colspan="2">附件</th>
            </tr>
            <tr>
                <th id="Trousers" headers="Trousers Clothes">裤子</th>
                <th id="Skirts" headers="Trousers Clothes">裙子</th>
                <th id="Dresses" headers="Trousers Clothes">连衣裙</th>
                <th id="Bracelets" headers="Trousers Accessories">手镯</th>
                <th id="Rings" headers="Trousers Accessories">吊环</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="3" id="Belgium" headers="state">比利时</th>
                <th id="Antwerp" headers="city">安特卫普</th>
                <td headers="Belgium Antwerp Trousers">56</td>
                <td headers="Belgium Antwerp Skirts">22</td>
                <td headers="Belgium Antwerp Dresses">43</td>
                <td headers="Belgium Antwerp Bracelets">72</td>
                <td headers="Belgium Antwerp Rings">23</td>
            </tr>
            <tr>
                <th id="Gent" headers="city">根特</th>
                <td headers="Belgium Gent Trousers">46</td>
                <td headers="Belgium Gent Skirts">18</td>
                <td headers="Belgium Gent Dresses">50</td>
                <td headers="Belgium Gent Bracelets">61</td>
                <td headers="Belgium Gent Rings">15</td>
            </tr>
            <tr>
                <th id="Brussels" headers="city">布鲁塞尔</th>
                <td headers="Belgium Brussels Trousers">51</td>
                <td headers="Belgium Brussels Skirts">27</td>
                <td headers="Belgium Brussels Dresses">38</td>
                <td headers="Belgium Brussels Bracelets">69</td>
                <td headers="Belgium Brussels Rings">28</td>
            </tr>
            <tr>
                <th rowspan="2" id="Netherlands" headers="state">荷兰</th>
                <th id="Amsterdam" headers="city">阿姆斯特丹</th>
                <td headers="Netherlands Amsterdam Trousers">89</td>
                <td headers="Netherlands Amsterdam Skirts">34</td>
                <td headers="Netherlands Amsterdam Dresses">69</td>
                <td headers="Netherlands Amsterdam Bracelets">85</td>
                <td headers="Netherlands Amsterdam Rings">38</td>
            </tr>
            <tr>
                <th id="Utrecht" headers="city">乌特勒支</th>
                <td headers="Netherlands Utrecht Trousers">80</td>
                <td headers="Netherlands Utrecht Skirts">12</td>
                <td headers="Netherlands Utrecht Dresses">43</td>
                <td headers="Netherlands Utrecht Bracelets">36</td>
                <td headers="Netherlands Utrecht Rings">19</td>
            </tr>
        </tbody>
    </table>
</body>

</html>